<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CP配对生成器</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #ffe6e6;
            color: #333;
        }
        h1 {
            color: #ff4d4d;
            text-align: center;
        }
        .container {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #ff4d4d;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            width: 100%;
            transition: all 0.3s;
        }
        button:hover {
            background-color: #ff3333;
        }
        #result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 5px;
            background-color: #fff0f0;
            display: none;
            text-align: center;
        }
        .cp-list {
            margin-top: 30px;
        }
        .cp-item {
            background-color: white;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0,0,0,0.1);
        }
        .blessing {
            color: #ff6666;
            font-style: italic;
            margin-top: 10px;
            font-size: 18px;
        }
        .cp-name {
            font-size: 20px;
            color: #ff4d4d;
            font-weight: bold;
        }
        .loading {
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>❤ CP配对生成器 ❤</h1>
        
        <div class="form-group">
            <label for="name1">第一个名字:</label>
            <input type="text" id="name1" placeholder="输入第一个名字">
        </div>
        
        <div class="form-group">
            <label for="gender1">第一个人的性别:</label>
            <select id="gender1">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        
        <div class="form-group">
            <label for="name2">第二个名字:</label>
            <input type="text" id="name2" placeholder="输入第二个名字">
        </div>
        
        <div class="form-group">
            <label for="gender2">第二个人的性别:</label>
            <select id="gender2">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        
        <button onclick="generateCP()">生成CP</button>
        
        <div id="result"></div>
        
        <h2>❤ 已创建的CP列表 ❤</h2>
        <div class="cp-list" id="cpList">
            <div class="loading">加载中...</div>
        </div>
    </div>

    <script>
        // 存储CP数据的数组
        let cpData = [];
        
        // 祝福语库
        const blessings = [
            "天生一对，地造一双！",
            "金童玉女，百年好合！",
            "比翼双飞，永结同心！",
            "天作之合，佳偶天成！",
            "情投意合，如胶似漆！",
            "花好月圆，永浴爱河！",
            "白头偕老，永结同心！",
            "郎才女貌，珠联璧合！",
            "相濡以沫，相敬如宾！",
            "执子之手，与子偕老！",
            "琴瑟和鸣，鸳鸯比翼！",
            "海枯石烂，情比金坚！",
            "甜甜蜜蜜，恩恩爱爱！",
            "心心相印，百年琴瑟！",
            "佳偶天成，良缘永结！"
        ];
        
        // Gitee仓库配置
        const giteeConfig = {
            owner: '宏宇的胡', // 替换为你的Gitee用户名
            repo: 'cp配对',      // 替换为你的仓库名
            path: 'cp-data.json',        // 数据存储文件
            token: '00f8d3f40b5c42c03efbfc6644e949c2'   // 替换为你的私人令牌
        };
        
        // 从Gitee获取数据
        async function loadCPData() {
            try {
                const response = await fetch(`https://gitee.com/api/v5/repos/${giteeConfig.owner}/${giteeConfig.repo}/contents/${giteeConfig.path}?access_token=${giteeConfig.token}`);
                const data = await response.json();
                
                if (data.content) {
                    const content = atob(data.content); // Base64解码
                    cpData = JSON.parse(content);
                    updateCPList();
                } else {
                    cpData = [];
                    updateCPList();
                }
            } catch (error) {
                console.error('加载数据失败:', error);
                // 如果文件不存在，创建一个空数组
                cpData = [];
                updateCPList();
            }
        }
        
        // 保存数据到Gitee
        async function saveCPData() {
            try {
                // 先获取文件sha，用于更新
                const getResponse = await fetch(`https://gitee.com/api/v5/repos/${giteeConfig.owner}/${giteeConfig.repo}/contents/${giteeConfig.path}?access_token=${giteeConfig.token}`);
                const getData = await getResponse.json();
                const sha = getData.sha || '';
                
                const content = btoa(JSON.stringify(cpData)); // Base64编码
                const message = `更新CP数据 ${new Date().toLocaleString()}`;
                
                const response = await fetch(`https://gitee.com/api/v5/repos/${giteeConfig.owner}/${giteeConfig.repo}/contents/${giteeConfig.path}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        access_token: giteeConfig.token,
                        content: content,
                        message: message,
                        sha: sha
                    })
                });
                
                const data = await response.json();
                console.log('数据保存成功:', data);
                return true;
            } catch (error) {
                console.error('保存数据失败:', error);
                return false;
            }
        }
        
        async function generateCP() {
            const name1 = document.getElementById('name1').value;
            const gender1 = document.getElementById('gender1').value;
            const name2 = document.getElementById('name2').value;
            const gender2 = document.getElementById('gender2').value;
            
            if(!name1 || !name2) {
                alert('请输入两个人的名字！');
                return;
            }
            
            // 随机选择祝福语
            const randomBlessing = blessings[Math.floor(Math.random() * blessings.length)];
            
            // 创建CP对象
            const cp = {
                id: Date.now().toString(), // 使用时间戳作为ID
                name1: name1,
                gender1: gender1,
                name2: name2,
                gender2: gender2,
                blessing: randomBlessing,
                timestamp: new Date().toLocaleString()
            };
            
            // 添加到数组
            cpData.push(cp);
            
            // 保存到Gitee
            const saved = await saveCPData();
            
            if (saved) {
                // 显示结果
                const resultDiv = document.getElementById('result');
                resultDiv.innerHTML = `
                    <h3>新CP创建成功！</h3>
                    <div class="cp-name">${name1}(${gender1}) ❤ ${name2}(${gender2})</div>
                    <div class="blessing">${randomBlessing}</div>
                    <p>创建时间: ${cp.timestamp}</p>
                `;
                resultDiv.style.display = 'block';
                
                // 清空输入框
                document.getElementById('name1').value = '';
                document.getElementById('name2').value = '';
            } else {
                alert('保存CP失败，请稍后再试！');
                // 从数组中移除未保存成功的CP
                cpData.pop();
            }
        }
        
        function updateCPList() {
            const cpListDiv = document.getElementById('cpList');
            cpListDiv.innerHTML = '';
            
            if(cpData.length === 0) {
                cpListDiv.innerHTML = '<p>还没有创建任何CP哦~</p>';
                return;
            }
            
            // 按时间倒序排列
            const sortedData = [...cpData].sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
            
            sortedData.forEach(cp => {
                const cpItem = document.createElement('div');
                cpItem.className = 'cp-item';
                cpItem.innerHTML = `
                    <h3>${cp.name1}(${cp.gender1}) ❤ ${cp.name2}(${cp.gender2})</h3>
                    <div class="blessing">${cp.blessing}</div>
                    <p>创建时间: ${cp.timestamp}</p>
                `;
                cpListDiv.appendChild(cpItem);
            });
        }
        
        // 页面加载时获取数据
        window.onload = function() {
            loadCPData();
        };
    </script>
</body>
</html>